/* eslint-disable @typescript-eslint/consistent-type-assertions */

import {
    CFeature,
    CVectorLayer,
    CVector,
    CPoint,
    CIcon,
    CStyle,
    CText,
    CFill,
    CStroke,
    WebGLPointsLayer
} from '../ol'
import icon from '../../assets/icon/blue.svg'



interface Props {
    Source: any[]
}
let features: any[] = [];

let VectorSource: any = new CVector();
let webglVectorSource: any = new CVector();
export default class Point {

    static Icons = ({ Source }: Props) => {

        if (!Array.isArray(Source)) return {};
        Source.forEach((item: any) => {
            let Icons = new CFeature({
                geometry: new CPoint([item.longitude, item.latitude], "XY"),
                data: {
                    name: item.name,
                    data: item
                }
            });
            Icons.setStyle(new CStyle({
                image: new CIcon({
                    opacity: (item.opacity ? item.opacity : 1),
                    scale: (item.scale ? item.scale : 0.51),
                    src: (item.icon ? item.icon : icon),
                }),
                text: new CText({
                    font: '14px Calibri,sans-serif',
                    fill: new CFill({ color: '#fff' }),
                    stroke: new CStroke({
                        color: '#000',
                        width: 4
                    }),
                    offsetY: (item.offsetY ? item.offsetY : 0),
                    text: (item.text ? item.text : '')
                })
            }));
            features.push(Icons);

        })


        let IconsLayer = new CVectorLayer({
            zIndex: 8,
            source: new CVector({
                features: features
            })
        });


        return IconsLayer;
    }

    static SinClick = (maps: any, events: any) => {
        maps.MapOn(
            'singleclick',
            (e: any) => {
                console.log(e);

                let Icons: any = new CFeature({
                    geometry: new CPoint([e.longitude, e.latitude], "XY"),
                    data: {
                        longitude: e.longitude,
                        latitude: e.latitude,
                        text: '点位1',
                        color: '#fff',
                        url: icon,
                        name: '',
                        content: ""
                    }
                });
                Icons.setStyle(new CStyle({
                    image: new CIcon({
                        src: icon,
                        scale: 1,
                        displacement: [0, 20]
                    }),
                    text: new CText({
                        font: '14px Calibri,sans-serif',
                        fill: new CFill({ color: '#fff' }),
                        offsetY: (-50),
                        text: ('点位1')
                    })
                }));
                VectorSource.addFeature(Icons);


                features = [];
                /**
                 * 对象中添加移出事件
                 */
                Icons.removeSelf = () => {

                    VectorSource.removeFeature(Icons)
                }
                events(VectorSource, Icons);

                maps.un('singleclick', (<any>window)['enent'])
            }
        )

    }

    /**
     * 更新点位的样式
     */
    static setStyle = (sub: any) => {

        return new CStyle({
            image: new CIcon({
                src: (sub.type === 4) ?
                    _M_rot(Number(sub.content) >= 337.5 ? 0 : Number(sub.content)) :
                    (sub.url ? sub.url : icon),
                scale: 1,
                displacement: [0, 20]
            }),
            text: new CText({
                font: '14px Calibri,sans-serif',
                fill: new CFill({ color: sub.color ? sub.color : '#fff' }),
                offsetY: (-50),
                text: sub.text
            })
        })
    }
    /**
     * 更新点位的位置
     */
    static setGeometry = (sub: any) => {
        return new CPoint([sub.longitude, sub.latitude], "XY")
    }
    /**
     * 正射点位信息
     * @param e 
     */
    static zsPoint = (Lists: any) => {

        Lists.forEach((e: any) => {
            let Icons: any = new CFeature({
                geometry: new CPoint([e.longitude, e.latitude], "XY"),
                data: {
                    longitude: e.longitude,
                    latitude: e.latitude,
                    text: e.name,
                    color: e.textColor,
                    url: e.iconStyle,
                    name: '',
                    content: e.content,
                    id: e.id,
                    type: e.contentType
                }
            });
            Icons.setStyle(new CStyle({
                image: new CIcon({
                    src: (e.contentType !== 4) ?
                        e.iconStyle :
                        _M_rot(Number(e.content) >= 337.5 ? 0 : Number(e.content)),
                    scale: 1,
                    displacement: [0, 20]
                }),
                text: new CText({
                    font: '14px Calibri,sans-serif',
                    fill: new CFill({ color: '#fff' }),
                    offsetY: (-50),
                    text: e.name
                })
            }));

            VectorSource.addFeature(Icons);
            /**
             * 对象中添加移出事件
             */
            Icons.removeSelf = () => {

                VectorSource.removeFeature(Icons)
            }
        });
        return VectorSource;

    }

    /**
     * 普通的点位图层
     * 图层默认导出，方便之后对图层上的点位增删改查
     */
    static VectorSource = VectorSource;
    /**\
     * 
     */
    static webGlVector = webglVectorSource;


    /**
     * WebGLPointsLayer 渲染点位
     * 可以多个渲染
     */
    static webGlPoint = (Lists: any[]) => {
        Lists.forEach((e: any) => {
            let Icons: any = new CFeature({
                geometry: new CPoint([e.longitude, e.latitude], "XY"),
                data: {
                    longitude: e.longitude,
                    latitude: e.latitude,
                    text: e.name,
                    color: e.textColor,
                    url: e.iconStyle,
                    name: '',
                    content: e.content,
                    id: e.id,
                    type: e.contentType
                }
            });

            webglVectorSource.addFeature(Icons);
            /**
             * 对象中添加移出事件
             */
            Icons.removeSelf = () => {

                webglVectorSource.removeFeature(Icons)
            }
        });

        return webglVectorSource;
    }
    /**
     * webgl 图层
     */
    static wenGlLayer = (Vector: any) => {
        let IconsLayer = new WebGLPointsLayer({
            source: Vector,
            zIndex: 8,
            style: {
                symbol: {
                    symbolType: 'image',
                    size: 45,
                    src: icon,
                    offset: [0, 20]
                }
            }
        });
        return IconsLayer
    }
    /**
     * 普通 图层
     */
    static concrltLayer = (Vector: any) => {
        let IconsLayer = new CVectorLayer({
            zIndex: 8,
            source: Vector
        });
        return IconsLayer;
    }
}

/**
 * 根据不同度数返回不同图标
 * @returns 
 */
const _M_rot = (sub: number) => {

    return `${process.env.PUBLIC_URL}images/icon/rotation_mat/${Math.ceil(sub / 22.5) * 22.5}angle.svg`
}